/*
 * 组件注释
 * @Author: machinist_wq
 * @Date: 2022-09-04 11:52:10
 * @LastEditors: machinist_wq
 * @LastEditTime: 2023-02-28 14:46:58
 * @Description: tag排序
 * 既往不恋！当下不杂！！未来不迎！！！
 */
"use strict";
import {
  useState,
  useEffect,
  forwardRef,
  useImperativeHandle,
  ReactElement,
  FC,
  ForwardedRef,
} from "react";
import { Space } from "antd";
import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons";
import styles from "./index.less";

/* dataSource={[
  {
    title: "发布时间",
    key: "assetPublishTime",
  },
]} */
/**
 * multiple 是否多选
 */
interface IData {
  title: string;
  key: string;
}
interface ISelectkey {
  sortField: string;
  sortType: 0 | 1 | 2;
}
interface IProps {
  dataSource: IData[];
  multiple?: boolean;
  onChange?: (allData: ISelectkey | ISelectkey[], current?: ISelectkey) => void;
}

const Index: FC<IProps> = forwardRef(
  (props: IProps, ref: ForwardedRef<unknown>): ReactElement => {
    const { dataSource = [], multiple = false, onChange } = props;
    const [selectkeys, setSelectkeys] = useState<ISelectkey[]>([]);

    const sort = (key: string) => {
      let current;
      let allData;
      if (multiple) {
        const idx = selectkeys.findIndex(item => item.sortField === key);

        if (idx > -1) {
          const sortType =
            selectkeys[idx].sortType + 1 > 2 ? 0 : selectkeys[idx].sortType + 1;
          selectkeys[idx].sortType = sortType as ISelectkey["sortType"];
          if (!sortType) {
            current = selectkeys.splice(idx, 1);
          } else {
            current = selectkeys[idx];
          }
          allData = JSON.parse(JSON.stringify(selectkeys));
        } else {
          current = {
            sortField: key,
            sortType: 1,
          };
          allData = [...selectkeys, current];
        }
      } else {
        if (selectkeys.length && selectkeys[0].sortField === key) {
          const sortType =
            selectkeys[0].sortType + 1 > 2 ? 0 : selectkeys[0].sortType + 1;
          current = {
            sortField: key,
            sortType: sortType,
          };
          allData = [current];
        } else {
          current = {
            sortField: key,
            sortType: 1,
          };
          current = allData = [current];
        }
      }

      setSelectkeys(allData);

      const _allData = JSON.parse(JSON.stringify(allData));
      const _current = JSON.parse(JSON.stringify(current));
      if (multiple) {
        onChange?.(_allData, _current);
      } else {
        onChange?.(_allData[0]);
      }
    };

    const isSort = (key: string, type: ISelectkey["sortType"]): boolean => {
      const record = selectkeys.find(item => item.sortField === key);
      return record?.sortType === type;
    };

    useEffect(() => () => setSelectkeys([]), []);

    useImperativeHandle(ref, () => ({
      selectkeys,
      setSelectkeys,
      sort,
    }));

    return (
      <Space className={`${styles.orderFieldList} orderFieldList`}>
        {dataSource.map((item: IData) => {
          return (
            <span
              key={item.key}
              className={`${styles.btn} btn`}
              onClick={() => sort(item.key)}>
              {item.title}
              <span className={`${styles.sort_icon_parent} sort_icon_parent`}>
                <span
                  className={`${styles.top_icon} ${isSort(item.key, 1) ? styles.active : null
                    } top_icon`}>
                  <CaretUpOutlined />
                </span>
                <span
                  className={`${styles.down_icon} ${isSort(item.key, 2) ? styles.active : null
                    } down_icon`}>
                  <CaretDownOutlined />
                </span>
              </span>
            </span>
          );
        })}
      </Space>
    );
  }
);
export default Index;
